<template>
  <div id="app-container" style="padding: 30px">
    <el-form :model="dispOrd" :rules="rules" ref="dispOrd" label-width="130px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="优先级" prop="priority">
            <el-select v-model="dispOrd.priority" clearable placeholder="请选择">
              <el-option :value="1" label="一级"/>
              <el-option :value="2" label="二级"/>
              <el-option :value="3" label="三级"/>
              <el-option :value="4" label="四级"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专业类型" prop="orderType">
            <el-select v-model="dispOrd.orderType" clearable placeholder="请选择">
              <el-option :value="1" label="生产调度指令"/>
              <el-option :value="2" label="安全调度指令"/>
              <el-option :value="3" label="开工调度指令"/>
              <el-option :value="4" label="培训调度指令"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="指令名称" prop="orderName">
            <el-input v-model="dispOrd.orderName"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="指令描述" prop="orderDescribe">
            <el-input v-model="dispOrd.orderDescribe" :rows="10" type="textarea"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3" :offset="5">
          <el-form-item>
            <el-button :disabled="saveBtnDisabled" type="primary" @click="saveDispOrd('dispOrd')">保存</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-button type="primary" @click="closed">返回</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import dispord from '@/api/pms/dispord'

  export default {
    data() {
      return {
        dispOrd: {},
        saveBtnDisabled: false,
        rules: {
          orderName: [
            { required: true, message: '请输入调度指令名称', trigger: 'blur' },
            { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
          ],
          orderDescribe: [
            { required: true, message: '请输入调度指令描述', trigger: 'blur' }
          ],
          priority: [
            { required: true, message: '请选择优先级', trigger: 'change' }
          ],
          orderType: [
            { required: true, message: '请选择专业类型', trigger: 'change' }
          ]
        }
      }
    },
    created() {
      this.init()
    },
    methods: {
      //初始化的时候调用回显
      init() {
        if (this.$route.params && this.$route.params.id) {
          let id = this.$route.params.id
          this.view(id)
        }
      },
      view(id) {
        //调用disprod的回显方法
        dispord.view(id)
          .then(response => {
            this.dispOrd = response.data.item
          })
      },
      closed() {
        this.$router.push('/dispord/list')
      },
      saveDispOrd() {
        dispord.update(this.dispOrd)
          .then(response => {
            // ## 消息提示
            this.$message({
              type: 'success',
              message: '保存成功'
            })
            // ## 跳转回 list 页面
            this.$router.push('/dispord/list')
          })
      }
    }
  }
</script>

<style scoped>

</style>

